<script setup>
	import {
		postUserAddressAPI,
		putUserAddressByIdAPI,
		getUserAddressByIdAPI
	} from '@/services/address'
	import {
		useAddressStore,
		useUserStore
	} from '@/stores/index.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	// 表单数据
	const form = ref({
		receiver: '', // 收货人
		contact: '', // 联系方式
		fullLocation: '', // 省市区(前端展示)
		// provinceCode: '', // 省份编码(后端参数)
		// cityCode: '', // 城市编码(后端参数)
		// countyCode: '', // 区/县编码(后端参数)
		address: '', // 详细地址
		isDefault: 0, // 默认地址，1为是，0为否
	})

	// 获取收货地址详情数据
	const getUserAddressByIdData = async (params) => {
		if (params.id!=0) {
			//有id为0代表有地址，没id代表是新建地址
			// 发送请求，根据id获取地址详细信息
			const res = await getUserAddressByIdAPI({a_id:params.id})
			// console.log(1111111111111,params.id,res)
			// 把数据合并到表单中
			// Object.assign(form.value, res.result)
			form.value.receiver = res.data.data.a_name
			form.value.contact = res.data.data.a_tel
			const addressInfo = res.data.data.o_address.split('|')
			form.value.address = addressInfo[3]
			form.value.fullLocation = addressInfo[0]+"|"+addressInfo[1]+"|"+addressInfo[2]
			form.value.isDefault = res.data.data.isDefault
			
			// console.log(1111111111111,params.id,res,form.value)
		}
	}

	// 页面加载
	const query = {
		id: 0
	}
	onLoad((params) => {
		query.id = params.id//id为地址id
		getUserAddressByIdData(params)
		// 动态设置标题
		uni.setNavigationBarTitle({//地址id，判断是否需要修改
			title: query.id!=0 ? '修改地址' : '新建地址'
		})

	})


	// 收集所在地区
	const onRegionChange = (ev) => {
		// console.log(99999, ev.detail.value)
		// 省市区(前端展示)
		form.value.fullLocation = ev.detail.value.join('|')
	}

	// 收集是否默认收货地址
	const onSwitchChange = (ev) => {
		form.value.isDefault = ev.detail.value ? 1 : 0
	}

	// 定义校验规则
	const rules = {
		receiver: {
			rules: [{
				required: true,
				errorMessage: '请输入收货人姓名'
			}],
		},
		contact: {
			rules: [{
					required: true,
					errorMessage: '请输入联系方式'
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					errorMessage: '手机号格式不正确'
				},
			],
		},
		fullLocation: {
			rules: [{
				required: true,
				errorMessage: '请选择所在地区'
			}],
		},
		address: {
			rules: [{
				required: true,
				errorMessage: '请选择详细地址'
			}],
		},
	}

	// 表单组件实例
	const formRef = ref()

	// 提交表单
	const onSubmit = async () => {
		try {
			// 表单校验
			await formRef.value.validate()
			// 校验通过后再发送请求
			console.log(11111111111111111,query.id)
			if (query.id!=0) {
				// 修改地址请求
				await putUserAddressByIdAPI({
					a_id:query.id,
					o_address:form.value.fullLocation+"|"+form.value.address,
					isDefault:form.value.isDefault,
					a_name:form.value.receiver,
					a_tel:form.value.contact
				})
			} else {
				// 新建地址请求
				await postUserAddressAPI({
					u_id:useUserStore().profile.u_id,
					o_address:form.value.fullLocation+"|"+form.value.address,
					isDefault:form.value.isDefault,
					a_name:form.value.receiver,
					a_tel:form.value.contact
				})
			}
			// 成功提示
			uni.showToast({
				icon: 'success',
				title: query.id ? '修改成功' : '添加成功'
			})
			// 返回上一页
			setTimeout(() => {
				uni.navigateBack()
			}, 400)
		} catch (error) {
			uni.showToast({
				icon: 'error',
				title: '请填写完整信息'
			})
		}
	}
</script>

<template>
	<view class="">
		<view class="content">
			<uni-forms :rules="rules" :model="form" ref="formRef">
				<!-- 表单内容 -->
				<uni-forms-item name="receiver" class="form-item">
					<text class="label">收货人</text>
					<input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
				</uni-forms-item>
				<uni-forms-item name="contact" class="form-item">
					<text class="label">手机号码</text>
					<input class="input" placeholder="请填写收货人手机号码" :maxlength="11" v-model="form.contact" />
				</uni-forms-item>
				<uni-forms-item name="fullLocation" class="form-item">
					<text class="label">所在地区</text>
					<picker @change="onRegionChange" class="picker" mode="region" :value="form.fullLocation.split('|')">
						<view v-if="form.fullLocation">{{ form.fullLocation }}</view>
						<view v-else class="placeholder">请选择省/市/区(县)</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item name="address" class="form-item">
					<text class="label">详细地址</text>
					<input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
				</uni-forms-item>
				<view class="form-item">
					<label class="label">设为默认地址</label>
					<switch @change="onSwitchChange" class="switch" color="#27ba9b" :checked="form.isDefault === 1" />
				</view>
			</uni-forms>
		</view>
		<!-- 提交按钮 -->
		<button @tap="onSubmit" class="button">保存并使用</button>
	</view>

</template>

<style lang="scss">
	// 深度选择器修改 uni-data-picker 组件样式
	:deep(.selected-area) {
		flex: 0 1 auto;
		height: auto;
	}

	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: red;
	}
</style>